<template>
  <div class="box">
    <div class="main">
      <div class="border">
        <input type="text" v-model="nickname" placeholder="请输入昵称">
      </div>
      <div class="btn">
        <mt-button class="f14" type="primary" v-if="!loading" @click="submit">
          <span>提交</span>
        </mt-button>
        <mt-button class="f14" type="default" disabled v-else>
          <mt-spinner color="#333" :type="3"></mt-spinner>
        </mt-button>
      </div>
    </div>
  </div>
</template>
<script>
import { Toast } from 'mint-ui'
import * as api from '@/service/api'
export default {
  components: {
  },
  data () {
    return {
      loading: false,
      nickname: ''
    }
  },
  methods: {
    async submit () {
      this.loading = true
      var data = this.$store.state.me.user
      data.userAccount = this.nickname
      try {
        await api.modifyUserInfo(data)
        this.$store.dispatch('getUserInfo')
        Toast('用户名修改成功')
        this.$router.push('/set/index')
      } catch (error) {
        console.log(error)
      }
      this.loading = false
    }
  }
}
</script>
<style lang="scss" scoped>
.box {
  padding-top: 5px;
  .main {
    background: #ffffff;
    padding: 0 30px;
    padding-top: 1px;
  }
}
.border {
  margin-top: 30px;
  border: 1px solid #e4e4e4;
  border-radius: 9px;
  padding: 23px;
  display: flex;
  align-items: center;
  input {
    flex: 1;
  }
}
.btn {
  padding: 30px 0;
  .mint-button {
    width: 100%;
    &.mint-button--primary {
      background: #f15d43;
      color: #fff;
    }
    display: flex;
    justify-content: center;
  }
}
</style>
